<template>
    <div class="coupon">
        <NavBar title="我的优惠券" left-arrow @click-left="onClickLeft"></NavBar>
        <Tabs v-model:active="activeName" sticky>
            <Tab title="全部" name="a" style="">
                <!-- 未使用 -->
                <div class="cou">
                    <div class="cou1">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <!-- 已使用 -->
                <div class="cou">
                    <div class="cou1" style="background-color: #6AB759;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1" style="background-color: #6AB759;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <!-- 已过期 -->
                <div class="cou">
                    <div class="cou1" style="background-color: #999999;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1" style="background-color: #999999;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
            </Tab>
            <Tab title="未使用" name="b">
                <div class="cou">
                    <div class="cou1">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
            </Tab>
            <Tab title="已使用" name="c">
                <div class="cou">
                    <div class="cou1" style="background-color: #6AB759;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1" style="background-color: #6AB759;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
            </Tab>
            <Tab title="已过期" name="d">
                <div class="cou">
                    <div class="cou1" style="background-color: #999999;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
                <div class="cou">
                    <div class="cou1" style="background-color: #999999;">
                        <span style="margin-top: -20px;margin-left: 30px;">万枫酒店优惠券</span>
                        <span style="margin-top: 24px;margin-left: -110px;font-size: 14px;">￥</span>
                        <span style="margin-top: 20px; font-size: 28px;">50</span>
                        <span style="margin-top: 24px;margin-left:10px;font-size: 13px;">满299元减50元</span>
                    </div>
                    <div class="cou2">
                        <span style="margin-top: -20px;margin-left: 35px;">使用期限</span><br>
                        <span style="margin-top: 5px;margin-left: -85px;">2024.09.01 10:00</span>
                        <span style="margin-top: 30px;margin-left: -120px;">2024.09.03 23:59</span>
                    </div>
                </div>
            </Tab>
        </Tabs>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { NavBar,Tab, Tabs  } from 'vant';
const onClickLeft = () => history.back();
</script>
<style>
.cou{
    background-color: #bbb;
    display: flex;   
    margin: 10px;
    border-radius: 5px;
    height: 100px;
    line-height: 100px;
    font-size: 15px;
}
.cou1{
    width: 60%;
    background-color: #FF2150;
    color: white;
    border-radius: 5px;
    display: flex;
}

.cou2{
    width: 40%;
    background-color: #fff;
    color: #c3bcbd;
    border-radius: 5px;
    text-align: center;
    display: flex;
    text-align: center;
}

</style>